<template>
	<!-- 搜索框 -->
	<view class="search-box">
		<up-search @search="search" @custom="search" @clear="clearSearchText" placeholder="搜索商品" v-model="searchValue"
			bgColor="#ffffff"></up-search>
	</view>
	<!-- 搜索历史 -->
	<view v-if="searchGoods.length==0&&searchRecord.length>0&&searchNone==false" class="search-record">
		<view class="search-record-head">
			<view class="text">搜索历史</view>
			<uni-icons type="trash" size="20" @click="deleteSearchRecord"></uni-icons>
		</view>
		<view class="search-record-content">
			<view class="record" @click="goSearch(item)" v-for="(item,index) in searchRecord" :key="index">{{item}}</view>
		</view>
	</view>
	<scroll-view v-else scroll-y="true" class="search-goods-content">
		<view   v-for="(item,index) in searchGoods" :key="index">
			<view @click="goGoodsDetail(item.goodsId)" class="goods-box">
				<image :src="baseUrl+'/'+item.goodsImage" mode="aspectFill"></image>
				<view class="goods-info">
					<view class="goods_name">{{item.goodsName}}</view>
					<view class="goods_intro">{{item.goodsIntro}}</view>
					<view class="goods_price">￥{{item.goodsSellingPrice}}</view>
				</view>
			</view>
			<view class="hr"></view>
		</view>
	</scroll-view>
	<view v-show="searchNone">
		<view class="search-none">
			<uni-icons type="search" size="150" color="#DDDDDD"></uni-icons>
			<view >没有找到商品, 换个词搜搜吧</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref, watch
	} from 'vue';
	import {
		get,
		baseUrl
	} from '/hooks/req.js';
	//搜索框值
	const searchValue = ref('');
	//搜索出来的商品数据
	const searchGoods = ref([]);
	//搜索历史
	const searchRecord = ref([]);
	let searchNone = ref(false)
	//清空搜索框内容触发方法
	const clearSearchText=()=>{
		searchGoods.value=[]
		searchNone.value=false
	}
	//搜索方法
	const search = () => {
		if (searchValue.value != '') {
			get(`/goods/search/` + searchValue.value).then(result => {
				if (result.data.data.length == 0) {
					searchNone.value=true
					searchGoods.value=[]
				} else {
					searchGoods.value = result.data.data
					searchNone.value=false
				}
			})
			for (let i in searchRecord.value) { //遍历搜索历史记录是否有相同关键词
				if (searchRecord.value[i] == searchValue.value) {
					searchRecord.value.splice(i, 1) //存在则删除
				}
			}	
			searchRecord.value.unshift(searchValue.value); //将搜索关键词添加到数组开头
			searchRecord.value.splice(10) //只保留10条数据
			uni.setStorage({ //将新数组存入缓存
				key: "search_record",
				data: searchRecord.value,
			})
		} else {
			uni.showToast({
				title: "请输入搜索内容",
				icon: "error"
			})
		}
	}
	
	onLoad(() => {
		uni.getStorage({
			key: "search_record",
			success(res) {
				searchRecord.value = res.data
			}
		})
	})
	const goSearch=(e)=>{
		searchValue.value=e
		search()
	}
	//删除搜索历史
	const deleteSearchRecord = () => {
		uni.showModal({
			content: '是否删除全部搜索记录',
			success(res) {
				if (res.confirm) {
					uni.removeStorage({
						key: 'search_record'
					})
					searchRecord.value = []
				}
			}
		})

	}
	//跳转商品详情
	const goGoodsDetail = (goodsId) => {
		uni.navigateTo({
			url: '/pages/goodsDetail/goodsDetail?goodsId=' + goodsId
		})
	}
</script>

<style scoped lang="scss">
	// 搜索框
	.search-box {
		height: 45px;
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #eeeeee;
		up-search{
			margin-left: 10px;
			width: 95vw;
		}
	}

	//搜索历史
	.search-record {
		padding: 10px 20px;

		.search-record-head {
			display: flex;
			justify-content: space-between;
			margin: 5px 0;

			.text {
				font-weight: bold;
			}
		}

		.search-record-content {
			display: flex;
			margin-top: 10px;
			flex-wrap: wrap;

			.record {
				border-radius: 15px;
				padding: 3px 15px;
				margin-bottom: 5px;
				margin-right: 15px;
				background-color: #F5F5F5;
				font-size: 14px;
			}
		}
	}

	//搜索到的内容
	.search-goods-content {
		.goods-box {
			height: 100px;
			display: flex;
			align-items: center;

			image {
				margin: 0 25px;
				width: 60px;
				height: 60px;
			}

			.goods-info {
				.goods_name {
					font-size: 16px;
					color: #333;
				}

				.goods_intro {
					font-size: 12px;
					color: #838383;
					width: 240px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.goods_price {
					font-size: 12px;
					color: #FF6600;
					margin-top: 6px;
				}
			}
		}
	}

	.hr {
		height: 2px;
		background-color: #eee;
		margin: 10px 0;
	}

	.search-none {
		display: flex;
		flex-direction: column;
		align-items: center;
		uni-icons{
			background-color: #EDEDED;
			border-radius: 50%;
			padding: 10px;
			margin: 20px 0;
		}
	}
</style>